<script lang="ts" setup>
import Tree from './tree.vue'
import { useUser } from './utils'
import { transformI18n } from '@/plugins/i18n'

const {
  dataList,
  queryParams,
  columns,
  loading,
  roleList,
  selectedRowKeys,
  postList,
  treeData,
  selectTree,
  paginationChange,
  search,
  reset,
  batchDeleteChange,
  onSelectChange,
  openModal,
  deleteData,
  exportData
} = useUser()
</script>

<template>
  <div class="user">
    <a-spin :spinning="treeData.length == 0">
      <Tree :data="treeData" class="tree" @select-tree="selectTree" />
    </a-spin>
    <div class="user-container">
      <SpTableQuery @clear="reset" @search="search">
        <template #default="{ expand }">
          <a-form :labelCol="{ style: { width: '68px' } }" label-align="left">
            <a-row :gutter="24">
              <a-col :span="6">
                <a-form-item label="用户名">
                  <a-input v-model:value="queryParams.username" placeholder="请输入用户名" />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="昵称">
                  <a-input v-model:value="queryParams.name" placeholder="请输入昵称" />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="手机号码">
                  <a-input v-model:value="queryParams.phone" placeholder="请输入手机号码" />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="归属地">
                  <a-input v-model:value="queryParams.ipCity" placeholder="请输入归属地" />
                </a-form-item>
              </a-col>
            </a-row>
            <div v-show="expand">
              <a-row :gutter="24">
                <a-col :span="6">
                  <a-form-item label="角色">
                    <a-select
                      v-model:value="queryParams.roleIds"
                      mode="multiple"
                      placeholder="请选择角色"
                    >
                      <a-select-option v-for="item in roleList" :key="item.id" :value="item.id">{{
                        item.name
                      }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item label="岗位">
                    <a-select
                      v-model:value="queryParams.postIds"
                      mode="multiple"
                      placeholder="请选择岗位"
                    >
                      <a-select-option v-for="item in postList" :key="item.id" :value="item.id">{{
                        item.postName
                      }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </a-form>
        </template>
      </SpTableQuery>
      <a-card>
        <SpTable
          :column-list="columns"
          :data="dataList"
          :loading="loading"
          :paging="queryParams"
          :row-key="(record) => record.id"
          :row-selection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange
          }"
          :scroll="{ x: 0, y: 500 }"
          add-button
          delete-button
          derive-button
          print-button
          @derive-change="exportData"
          @add-change="openModal('新增')"
          @pagination-change="paginationChange"
          @batch-delete-change="batchDeleteChange"
        >
          <template #operation="{ record }">
            <a-button
              v-auth="'system:user:update'"
              size="small"
              type="link"
              @click="openModal('编辑', record)"
              >{{ transformI18n('btn.edit') }}</a-button
            >
            <a-popconfirm
              cancel-text="取消"
              ok-text="确定"
              placement="left"
              title="您确认删除这条数据吗？"
              @confirm="deleteData(record)"
            >
              <a-button v-auth="'system:user:remove'" danger size="small" type="link">{{
                transformI18n('btn.delete')
              }}</a-button>
            </a-popconfirm>
          </template>
        </SpTable>
      </a-card>
    </div>
  </div>
</template>

<style scoped>
.user {
  display: flex;
  .tree {
    width: 260px;
    margin-right: 15px;
  }
  .user-container {
    width: calc(100% - 275px);
  }
}
</style>
